<html>
    <head>
        <title>Cloud Optimized GeoTiff</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js"
            }
        }
        </script>

        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <style type="text/css">
            #description {
                z-index: 2;
                left: 10px;
            }
            #menuDiv {
                left: unset;
                right: 10px;
            }
        </style>
    </head>
    <body>
        <div id="description">
            <form>Specify the URL of a COG to load:
                <input type="text" id="cog_url" />
                <button id="readCOGURLButton">Load</button>
            </form>
            <button id="loadRGBSampleButton">Load RGB sample</button>
        </div>

        <div id="viewerDiv"></div>

        <script type="module">

            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';

            itowns.CRS.defs(
                'EPSG:2154',
                '+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000'
                    + ' +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
            );

            const viewerDiv = document.getElementById('viewerDiv');

            let view;

            function readCOGURL() {
                const url = document.getElementById('cog_url').value
                    || new URLSearchParams(window.location.search).get('geotiff');

                if (url) {
                    loadCOG(url);
                    document.getElementById('cog_url').value = url;
                }
            }

            function loadRGBSample() {
                document.getElementById('cog_url').value =
                    'https://cdn.jsdelivr.net/gh/iTowns/iTowns2-sample-data/cog/nantes/nantes.tif';
                readCOGURL();
            }

            function loadCOG(url) {
                // create a source from a Cloud Optimized GeoTiff
                const cogSource = new itowns.CogSource({
                    url: url,
                    crs: "EPSG:2154",
                    // Default resample method is 'nearest', 'bilinear' looks better when zoomed
                    resampleMethod: 'bilinear'
                });

                cogSource.whenReady.then(() => {
                    if (view !== undefined) {
                        view.dispose(true);
                        while (viewerDiv.firstChild) {
                            viewerDiv.removeChild(viewerDiv.firstChild);
                        }
                    }

                    view = new itowns.PlanarView(
                        viewerDiv,
                        cogSource.extent,
                        {
                            maxSubdivisionLevel: 10,
                            placement: { tilt: 90 }
                        },
                    );
                    view.camera.camera3D.far = 1000000;

                    setupLoadingScreen(viewerDiv, view);
                    const debugMenu = new GuiTools('menuDiv', view);
                    debug.createTileDebugUI(debugMenu.gui, view);

                    const cogLayer = new itowns.ColorLayer('cog', {
                        source: cogSource,
                    });

                    view.addLayer(cogLayer)
                        .then(debugMenu.addLayerGUI.bind(debugMenu));
                });
            }

            readCOGURL();

            const loadRGBSampleButton = document.getElementById('loadRGBSampleButton');
            const readCOGURLButton = document.getElementById('readCOGURLButton');

            loadRGBSampleButton.addEventListener('click', loadRGBSample);
            readCOGURLButton.addEventListener('click', readCOGURL);

            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>
